<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <p>jquery each</p>
  <p>jquery each</p>
  <p>jquery each</p>

  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
  <script>
    // iterator 迭代器模式
    var arr = [1, 2, 3]
    var nodeList = document.querySelectorAll('p')
    var $p = $('p')

    // 要对这三个变量进行遍历，需要写三个遍历方法

    // 第一
    arr.forEach(function (item) {
      console.log(item)
    })

    // 第二
    for (let i = 0; i < nodeList.length; i++) {
      console.log(nodeList[i])
    }

    // 第三
    $p.each(function (key, p) {
      console.log(key, p)
    })

    // 如何写出一个方法来遍历这三个对象呢
    function each(data) {
      var $data = $(data)
      $data.each(function (key, p) {
        console.log(key, p)
      })
    }

    each(arr)
    each(nodeList)
    each($p)
  </script>
</body>

</html>